<template>
  <ele-page flex-table hide-footer>
    <!-- 搜索表单 -->
    <mt-search @search="reload" />
    <ele-card :body-style="{ paddingTop: '8px' }" flex-table>
      <!-- 表格 -->
      <ele-pro-table
        hide-footer
        ref="tableRef"
        row-key="deptId"
        :columns="columns"
        v-model:selections="selections"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        highlight-current-row
        :export-config="{ fileName: '部门数据' }"
        :default-expand-all="true"
        :pagination="true"
        cache-key="systemDeptTable"
      >
        <!-- 左上角新建 删除插槽 -->
        <template #toolbar>
          <div class="flex">
            <el-button
              class="ele-btn-icon mr-2"
              :icon="DownloadOutlined"
              v-permission="'system:dict:export'"
            >
              <span class="mt-1"> 导出 </span>
            </el-button>

            <div class="toolbar-text">
              <p>
                任务数量-正常/告警/异常: <span> {{ TaskNums.normal }} </span>
                <span>/{{ TaskNums.warning }}</span>
                <span>/{{ TaskNums.abnormal }}</span>
              </p>
            </div></div
          >
        </template>
        <!-- 操作栏插槽 -->
        <template #action="{ row, $index }">
          <el-space>
            <el-link
              type="primary"
              :underline="false"
              @click="openEdit(row)"
              icon="Edit"
              >修改
            </el-link>

            <el-divider direction="vertical" style="margin: 0" />
            <el-popconfirm
              :width="190"
              title="确定要删除此用户吗？"
              placement="top-end"
              @confirm="remove(row)"
            >
              <template #reference>
                <el-link icon="Delete" type="danger" :underline="false"
                  >删除
                </el-link>
              </template>
            </el-popconfirm>
          </el-space>
        </template>
      </ele-pro-table>
    </ele-card>
    <!-- 编辑弹窗 -->
    <mt-edit
      v-model="showEdit"
      :data="current"
      :parent-id="parentId"
      @done="reload"
    />
  </ele-page>
</template>

<script setup>
  import { ref, h, reactive, computed } from 'vue';
  import { ElMessageBox } from 'element-plus/es';
  import { EleMessage } from 'ele-admin-plus/es';
  import { DownloadOutlined } from '@/components/icons';
  import MtSearch from './components/mt-search.vue';
  import MtEdit from './components/mt-edit.vue';
  import { removeDept } from '@/api/system/dept';

  defineOptions({ name: 'SystemDept' });
  // 表格上方测试数据
  const TaskNums = reactive({
    normal: 168,
    warning: 15,
    abnormal: 16
  });

  /** 表格实例 */
  const tableRef = ref(null);

  /** 表格列配置 */
  const columns = computed(() => {
    return [
      {
        type: 'selection',
        columnKey: 'selection',
        width: 48,
        align: 'center',
        fixed: 'left'
      },
      {
        type: 'index',
        columnKey: 'index',
        label: '序号',
        width: 60,
        align: 'center'
      },
      {
        prop: 'proName',
        label: '巡检对象',
        align: 'left',
        minWidth: 220,
        slot: 'proName'
      },
      {
        prop: 'proAdd',
        label: '巡检项目',
        align: 'center',
        width: 110
      },
      {
        prop: 'optionObj',
        label: '采样时间',
        align: 'center',
        minWidth: 100
      },
      {
        prop: 'objInfo',
        label: '采样结果',
        align: 'center',
        minWidth: 110
      },
      {
        prop: 'remark',
        label: '照片/视频',
        align: 'center',
        minWidth: 110
      },
      {
        prop: 'createTime',
        label: '趋势',
        align: 'center',
        width: 90
      },
      {
        prop: 'object',
        label: '标识',
        align: 'center',
        slot: 'object',
        width: 90
      },
      {
        label: '审核状态',
        align: 'center',
        prop: 'status',
        width: 90
      },
      {
        columnKey: 'action',
        label: '操作',
        width: 180,
        align: 'center',
        slot: 'action',
        hideInPrint: true,
        hideInExport: true
      }
    ];
  });

  /** 当前编辑数据 */
  const current = ref({
    test: 123
  });

  /** 是否显示编辑弹窗 */
  const showEdit = ref(false);

  /** 上级菜单id */
  const parentId = ref();

  /** 表格选中数据 */
  const selections = ref([]);

  /** 表格数据源 */
  const datasource = () => {
    let data = new Promise((resolve) => {
      resolve([
        {
          id: 0,
          proName: '巡检对象',
          proAdd: '巡检项目名称',
          optionObj: '2023-02-07 10:58:18',
          objInfo: '配电间',
          remark: '所属部门',
          createTime: '机器人',
          object: '机器人',
          status: '已审核'
        }
      ]);
    });
    return data;
  };

  /** 刷新表格 */
  const reload = (where) => {
    tableRef.value?.reload?.({ where });
  };

  /** 打开编辑弹窗 */
  const openEdit = (row, id) => {
    console.log(row, 2222);
    // current.value = row ?? null;
    parentId.value = id;
    showEdit.value = true;
  };

  /** 删除单个 */
  const remove = (row) => {
    ElMessageBox.confirm(
      `是否确认删除名称为“${row.deptName}”的数据项？`,
      '系统提示',
      { type: 'warning', draggable: true }
    )
      .then(() => {
        const loading = EleMessage.loading({
          message: '请求中..',
          plain: true
        });
        removeDept(row.deptId)
          .then(() => {
            loading.close();
            EleMessage.success('删除成功');
            reload();
          })
          .catch((e) => {
            loading.close();
            EleMessage.error(e.message);
          });
      })
      .catch(() => {});
  };
</script>

<style lang="scss" scoped>
  .toolbar-text {
    line-height: 35px;
    margin-left: 5px;

    & p {
      font-family: Microsoft YaHei UI;
      font-size: 16px;
      font-weight: 700;
    }
  }
</style>
